<template>
  <div class="sidebar-wrap" :style="sidebarStyle">
    <div class="sidebar-logo flex-center" :style="sidebarLogoStyle">
      <img src="@/assets/vue.svg" alt="" />
      <span v-if="!globalStore.isCollapse">{{ config.sidebarTitle }}</span>
    </div>
    <div class="sidebar-scroll" :style="sidebarScrollStyle">
      <el-scrollbar style="height: 100%">
        <AppMenu />
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useGlobalStore } from "@/store/modules/global";
import config from "@/layouts/config";
/* components */
import AppMenu from "@/layouts/components/Menu/index.vue";

const globalStore = useGlobalStore();
/* 动态样式 */
const sidebarStyle = computed(() => ({
  width: globalStore.isCollapse
    ? config.sidebarCollapseWidth
    : config.sidebarWidth,
  "padding-bottom": config.sidebarPaddingBottom,
}));

const sidebarLogoStyle = computed(() => ({
  height: config.sidebarLogoHeight,
}));
const sidebarScrollStyle = computed(() => ({
  height: `calc(100% - ${config.sidebarLogoHeight})`,
}));
</script>
<style lang="scss" scoped>
.sidebar-wrap {
  box-sizing: border-box;
  border-right: 1px solid $border-color;
  height: 100%;
  transition: 0.3s;
  flex-shrink: 0;
  .sidebar-logo {
    box-sizing: border-box;
    border-bottom: 1px solid $border-color;
    font-size: 20px;
    font-weight: bold;
    img {
      width: 28px;
      object-fit: contain;
    }
    span {
      margin-left: 6px;
    }
  }
}
</style>
